import { Form, Input, Button, message } from 'antd';
import { apiLogin, apigetCode } from '../api'
import Cookie from 'js-cookie'
import React, { useState } from 'react'

const Login = () => {

    const [email, setEmail] = useState('')

    const onFinish = (data) => {
        apiLogin(data).then(res => {
            // 将token保存到本地
            Cookie.set('token', res.token)

            // 跳转页面
            window.location.href = '/'
        })
    }

    // 获取验证码
    const getCode = () => {
        apigetCode({email}).then(res => {
            message.success('发送成功')
        })
    }

    return <div>
        <Form
            name="basic"
            onFinish={onFinish} // 表单校验成功的回调函数
            autoComplete="off"
        >
            <Form.Item
                label="用户名"
                name="username"
                rules={[
                    {
                        required: true, // 非空校验
                        message: 'Please input your username!',
                    },
                    {
                        //   value: 输入框中的内容
                        // rule: 当前输入框的实例
                        validator(rule, value) {
                            // 如果内容为空 或者符合条件语句的话 就返回Promise.resolve() 表示成功  否者返回Promise.reject() 表示失败
                            const reg = /^[a-z][0-9]{4,6}$/
                            if (reg.test(value) || !value) {
                                // 通过校验
                                return Promise.resolve()
                            } else {
                                // 不同校验
                                return Promise.reject()
                            }

                        },
                        // 如果校验未通过  触发message
                        message: '您输入的内容有误'
                    }
                ]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="密码"
                name="password"
                rules={[
                    {
                        required: true,
                        message: 'Please input your password!',
                    },
                ]}
            >
                <Input.Password />
            </Form.Item>
            <Form.Item
                label="邮箱"
                name="email"
            >
                <Input value={email}  onChange={e => setEmail(e.target.value)} />

            </Form.Item>

            <Form.Item
                label="验证码"
                name="code"
            >
                <div>
                    <Input placeholder="请输入验证码" />
                    <Button onClick={getCode}>点击获取验证码</Button>
                </div>
            </Form.Item>

            <Form.Item
            >
                <Button type="primary" htmlType="submit">
                    登录
                </Button>
            </Form.Item>
        </Form>
    </div>
}

export default Login